#main{
    margin-top:59px;
    padding: unset;
    display: flex;
}

#carte-container{
   width: 600px;
   max-width: 100%;
   height: calc(100vh - 88px);
   position: relative;
   display: flex;
   z-index: 1;
}

#carte{
   border-style: groove;
   flex: 1;
   height: 100%;
}

#splitter{
   width: 6px;
   cursor: col-resize;
   background-color: #ccc;
   flex-shrink: 0;
   transition: background-color 0.15s;
}
#splitter:hover,
#splitter.active{
   background-color: #888;
}

#panneau-filtres{
   flex: 1;
   padding: 10px;
   overflow-y: auto;
   height: calc(100vh - 88px);
}
#panneau-filtres h3{
   margin-top: 0;
}

.section-collapsible{
   margin-bottom: 15px;
}
.section-header{
   cursor: pointer;
   user-select: none;
   margin: 0 0 8px 0;
   padding: 4px 6px;
   border-bottom: 1px solid #ccc;
}
.section-header:hover{
   background-color: #f0f0f0;
}
.section-chevron{
   display: inline-block;
   transition: transform 0.2s;
   font-size: 0.8em;
   margin-right: 4px;
}
.section-collapsible.collapsed .section-chevron{
   transform: rotate(-90deg);
}
.section-collapsible.collapsed .section-body{
   display: none;
}

#liste-cabanes table{
   width: 100%;
   border-collapse: collapse;
   font-size: 0.85em;
}
#liste-cabanes th,
#liste-cabanes td{
   padding: 4px 6px;
   border-bottom: 1px solid #eee;
   text-align: left;
}
#liste-cabanes tr[data-cabane]{
   cursor: pointer;
}
#liste-cabanes tr[data-cabane]:hover td{
   background-color: #f0f0f0;
}
#liste-cabanes .liste-cabanes-photos{
   white-space: nowrap;
}
#liste-cabanes .liste-cabanes-photos img{
   max-width: 40px;
   max-height: 40px;
   margin-right: 2px;
   vertical-align: middle;
   border-radius: 3px;
}

#btn-nouv-cabane{
   margin-bottom: 8px;
}

.popupnouv{
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 110;
    background-color: rgba(0, 0, 0, 0.7);
}
.popupnouv-content{
    background-color: #fff;
    padding: 20px;
    margin: 10vh auto;
    width: 80%;
    max-width: 500px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
}
.popupnouv-content input[type="text"]{
    width: 100%;
    padding: 6px;
    font-size: 1em;
    box-sizing: border-box;
}
.nouvcab-erreur{
    color: #c00;
    font-weight: bold;
    min-height: 1.2em;
}

#liste-cabanes .statut-carre{
    cursor: default;
}
body.peut-ed-reserv #liste-cabanes .statut-carre{
    cursor: pointer;
}
body.peut-ed-reserv #liste-cabanes .statut-carre:hover{
    outline: 2px solid #333;
    outline-offset: 1px;
}
.filtre-groupe{
   border: 1px solid #ccc;
   border-radius: 6px;
   padding: 8px;
   margin-bottom: 15px;
}
.filtre-groupe select{
   width: 100%;
   margin-top: 8px;
   padding: 4px;
}

#mes-reservations table{
   width: 100%;
   border-collapse: collapse;
   font-size: 0.85em;
}
#mes-reservations th,
#mes-reservations td{
   padding: 4px 6px;
   border-bottom: 1px solid #eee;
   text-align: left;
}
#mes-reservations tr.reserv-passee{
   color: #999;
}
#mes-reservations tr.reserv-future{
   font-weight: bold;
}
#mes-reservations tr.reserv-future td{
   background-color: #e8f5e9;
}
#mes-reservations tr{
   cursor: pointer;
}
#mes-reservations tr:hover td{
   background-color: #f0f0f0;
}

@media (max-width: 768px) {
   #carte-container{
      width: 100%;
   }
   #splitter{
      display: none;
   }
   #panneau-filtres{
      display: none;
   }
   .btnclose{
      margin-top: 5px;
      margin-left: 5px;
   }
   .popup-content,
   .popupedit-content,
   .popupreserv-content,
   .popupeditreserv-content{
      width: 98%;
      max-height: 85vh;
      padding: 2px;
      margin: 0 auto;
   }
}

.btnclose{
    font-size: xxx-large;
    color:white;
    margin-top: 20px;
    margin-left: 20px;
    cursor: pointer;
}

.popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    background-color: rgba(0, 0, 0, 0.7);
}

.popup-content {
    background-color: #fff;
    padding: 20px;
    margin: 0vh auto;
    width: 90%;
    max-width: 1100px;
    max-height: 70vh; /* Ajoutez une hauteur maximale en pourcentage de la hauteur de la fenêtre */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    overflow-y: scroll; /* Ajoutez le défilement vertical */

}
.popup-flex{
    display: flex;
    gap: 15px;
    align-items: flex-start;
}
.popup-info{
    flex: 1;
    min-width: 0;
}
.popup-minicarte-wrapper{
    width: 300px;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    align-self: flex-start;
}
#popup-minicarte{
    width: 100%;
    height: 300px;
    border-radius: 6px;
    border: 1px solid #ccc;
}
.popup-minicarte-aide{
    font-size: 0.8em;
    color: #666;
    margin: 6px 0 0 0;
    font-style: italic;
}
.popup-minicarte-toggle{
    margin-top: 8px;
}
#popup-minicarte-quartier-img{
    display: block;
    width: 100%;
    margin-top: 10px;
    border-radius: 6px;
    border: 1px solid #ccc;
}
@media (max-width: 768px){
    .popup-flex{
        flex-direction: column;
    }
    .popup-minicarte-wrapper{
        width: 100%;
        position: static;
    }
    #popup-minicarte{
        height: 220px;
    }
}
.popup-content .btnmodif{
    vertical-align: middle;
    width: 50px;
}
.popup-content .btnmodif img{
    width:35px;
    display:none;
}
.popup-content .btnmodif:hover img{
    display:block;
}
.popup-content tr{
    vertical-align: top;
}

.popupedit {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 110;
    background-color: rgba(0, 0, 0, 0.7);
}

.popupedit-content {
    background-color: #fff;
    padding: 20px;
    margin: 1vh auto;
    width: 80%;
    max-width: 800px;
    max-height: 70vh; /* Ajoutez une hauteur maximale en pourcentage de la hauteur de la fenêtre */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    overflow-y: scroll; /* Ajoutez le défilement vertical */
}
.popupedit-content table{
    margin: auto;
}
.popupedit-content td{
    text-align: center;
}
.poppopupeditup-content tr{
    vertical-align: top;
}
.fieldset-disabled {
  background-color: #ddd;
}
.fondblanc{
     background-color: #fff;
}
.popupreserv {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 110;
    background-color: rgba(0, 0, 0, 0.7);
}

.popupreserv-content {
    background-color: #fff;
    padding: 20px;
    margin: 2vh auto;
    width: 80%;
    max-width: 600px;
    max-height: 70vh; /* Ajoutez une hauteur maximale en pourcentage de la hauteur de la fenêtre */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    overflow-y: scroll; /* Ajoutez le défilement vertical */
}
.popupreserv-content table{
    margin: auto;
}
.popupreserv-content td{
    text-align: center;
}
.popupreserv-content tr{
    vertical-align: top;
}

.popupeditreserv {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 110;
    background-color: rgba(0, 0, 0, 0.7);
}

.popupeditreserv-content {
    background-color: #fff;
    padding: 20px;
    margin: 2vh auto;
    width: 80%;
    max-width: 600px;
    max-height: 70vh; /* Ajoutez une hauteur maximale en pourcentage de la hauteur de la fenêtre */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    overflow-y: scroll; /* Ajoutez le défilement vertical */
}
.popupeditreserv-content table{
    margin: auto;
}
.popupeditreserv-content td{
    text-align: center;
}
.popupeditreserv-content tr{
    vertical-align: top;
}

.td_carte{
    vertical-align: top;
}
.td_carte img{
    top:100px;
}
.divCabanesTable{
    max-height: 1100px;
    overflow: overlay;
}

#cabanesInfo-reservations .reservable:hover{
    background: #4CAF5020;
    box-shadow: 4px 4px 4px #888888;
    border-radius: 7px;
}
#cabanesInfo-reservations .reservable{
    cursor: pointer;
}

#cabanesInfo-reservations td{
    padding: 2px 5px 2px 5px;
    border:none;
}

#cabanesInfo-reservations .statut1{
    background: linear-gradient(to right, #000000, transparent 50px);
    padding-left: 45px;
}
#cabanesInfo-reservations .statut2{
    background: linear-gradient(to right, #F50057, transparent 50px);
    padding-left: 45px;
}
#cabanesInfo-reservations .statut3{
    background: linear-gradient(to right, #000000, transparent 50px);
    padding-left: 45px;
}
#cabanesInfo-reservations .statut4{
    background: linear-gradient(to right, #ffa200, transparent 50px);
    padding-left: 45px;
}
#cabanesInfo-reservations .statut5{
    background: linear-gradient(to right, #F50057, transparent 50px);
    padding-left: 45px;
}
#cabanesInfo-reservations .statut6{
    background: linear-gradient(to right, #4CAF50, transparent 50px);
    padding-left: 45px;
}

.statut-barre{
    display: inline-flex;
    gap: 1px;
    vertical-align: middle;
}
.statut-carre{
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    border: 1px solid rgba(0,0,0,0.15);
}
.statut-carre.statut-1,
.statut-carre.statut-3{ background: #000000; }
.statut-carre.statut-2,
.statut-carre.statut-5{ background: #F50057; }
.statut-carre.statut-4{ background: #ffa200; }
.statut-carre.statut-6{ background: #4CAF50; }

#tooltip-statut{
    display: none;
    position: fixed;
    z-index: 10000;
    background: #333;
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.4;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    pointer-events: none;
    max-width: 260px;
}
#tooltip-statut::after{
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #333;
}
.tooltip-statut-titre{
    font-weight: bold;
    margin-bottom: 2px;
}
.tooltip-statut-dates{
    color: #ccc;
    font-size: 0.85em;
    margin-bottom: 6px;
}
.tooltip-statut-statut{
    display: flex;
    align-items: center;
    gap: 6px;
}
.tooltip-statut-statut .statut-carre{
    width: 14px;
    height: 14px;
    border-color: rgba(255,255,255,0.4);
}

.cabane-pin-wrap{
    background: transparent;
    border: none;
}
.cabane-pin{
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #444;
    box-shadow: 0 2px 4px rgba(0,0,0,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #444;
    font-size: 16px;
}
.cabane-pin-cabane{
    background: #fff;
    border-color: #6b3e1a;
    color: #6b3e1a;
}
.cabane-pin-tente{
    background: #fff;
    border-color: #2e7d32;
    color: #2e7d32;
}
.cabane-pin-roulotte{
    background: #fff;
    border-color: #1565c0;
    color: #1565c0;
}

.editable:hover{
    background-color: #4CAF50;
    cursor: pointer;
    box-shadow: 4px 4px 4px #888888;
    border-radius: 7px;
}

.leaflet-tooltip.tooltipCabane{
    padding: 0;
    border: none;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    background: #fff;
    max-width: 260px;
    white-space: normal;
}
.tooltipCabane-content{
    padding: 8px;
    font-size: 0.9em;
    color: #222;
}
.tooltipCabane-haut{
    display: flex;
    gap: 8px;
    align-items: flex-start;
}
.tooltipCabane-img{
    width: 80px;
    height: auto;
    border-radius: 4px;
    flex-shrink: 0;
}
.tooltipCabane-txt{
    flex: 1;
}
.tooltipCabane-nom{
    font-weight: bold;
    font-size: 1.05em;
    margin-bottom: 2px;
}
.tooltipCabane-inclus{
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #eee;
    font-size: 0.85em;
}
.tooltipCabane-barre{
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #eee;
}